<template>
    <div class="orderdetail">
        <van-skeleton title :row="3" :loading="loading">
            <div class="" v-if="detail.length>0">
                <div class="top" >
                    <h3>{{ orderStatus.title }}</h3>
                    <p>订单金额(含运费): ￥{{ detail[0] && detail[0].subtotal }}</p>
                    <p v-if="orderStatus.status != 4">
                        <van-count-down :time="orderStatus.time" format="DD 天 HH 时 mm 分 ss 秒" />
                    </p>
                </div>
                <div class="address">
                    <van-cell :title="detail[0].addressname" :value="detail[0].mobile" :label="detail[0].province+detail[0].city+detail[0].district+detail[0].address" />
                </div>
                <div class="goodsList" v-for="(item, index) of detail" :key="index">
                    <van-card 
                        :price="item.total" 
                        :title="item.name" 
                        :thumb="item.url" 
                        :num="item.order_num"
                    >
                        
                    </van-card>
                </div>
                <div class="detail">
                    <van-cell title="商品小计" :value="'￥'+detail[0].subtotal"/>
                    <van-cell title="运费" value="￥0.00"/>
                    <van-cell title="实付费(含运费)" :value="'￥'+detail[0].subtotal"/>
                    <van-cell title="买家备注" :label="detail[0].remark || '无'"/>
                </div>
                <div class="bottom">
                    <van-cell title="订单编号：" :value="detail[0].order_code"/>
                    <van-cell title="创建时间：" :value="detail[0].create_at"/>
                    <van-cell title="支付时间：" :value="detail[0].create_at "/>
                </div>
                <div class="item" v-if="detail[0].payment_status == 2 && detail[0].shipping_status == 2">
                    <div class="form">
                        <span>选择快递公司</span>
                        <select name="" id="" v-model="com">
                            <option value="">请选择</option>
                            <option value="yunda">韵达快递</option>
                            <option value="youzhengguonei">邮政快递包裹</option>
                            <option value="zhongtong">中通快递</option>
                            <option value="yuantong">圆通速递</option>
                            <option value="shunfeng">顺丰速运</option>
                            <option value="huitongkuaidi">百世快递</option>
                            <option value="shentong">申通快递</option>
                            <option value="jd">京东物流</option>
                            <option value="ems">EMS</option>
                            <option value="tiantian">天天快递</option>
                            <option value="debangwuliu">德邦</option>
                            <option value="zhaijisong">宅急送</option>
                            <option value="youshuwuliu">优速快递</option>
                            <option value="debangkuaidi">德邦快递</option>
                            <option value="baishiwuliu">百世快运</option>
                            <option value="pjbest">品骏快递</option>
                            <option value="transrush">TransRush</option>
                            <option value="dhl">DHL-中国件</option>
                            <option value="zhongtongkuaiyun">中通快运</option>
                            <option value="annengwuliu">安能快运</option>
                            <option value="suer">速尔快递</option>
                            <option value="suning">苏宁物流</option>
                            <option value="yundakuaiyun">韵达快运</option>
                            <option value="adapost">安达速递</option>
                        </select>
                    </div>
                </div>
                <div class="item" v-if="detail[0].payment_status == 2 && detail[0].shipping_status == 2">
                    <van-field v-model="num" label="快递单号" placeholder="请输入快递单号" />
                </div>
                <div class="btn" v-if="detail[0].payment_status == 2 && detail[0].shipping_status == 2">
                    <van-button :loading='btnloading' type="danger" size="large" @click="submit">发货</van-button>
                </div>
            </div>
        </van-skeleton>
        
        <van-tabbar route active-color="#ee0a24">
            <van-tabbar-item to="/" icon="shop-o">首页</van-tabbar-item>
            <van-tabbar-item to="/goodstypelist" icon="apps-o">全部分类</van-tabbar-item>
            <van-tabbar-item to="/shopcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="/center" icon="manager-o">会员中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            loading:true,
            btnloading:false,
            detail: [],
            logis: '',
            com: '',
            num: ''
        }
    },
    computed: {
        ...mapState(['openid', 'userState']),
        orderStatus() {
            let status = ''
            let title = ''
            let desc = ''
            let time = ''
            this.detail.forEach(item => {
                if(item.payment_status == 1) {
                    status = 1
                    title = '买家未付款'
                    desc = '后不付款订单自动取消'
                    time = new Date(this.detail[0].payment_endtime).getTime() - new Date().getTime()
                    
                    return
                }
                if(item.payment_status == 2) {
                    if(item.shipping_status == 2) {
                        status = 2
                        title = '卖家已付款，请尽快发货'
                        desc = '后不发货,会将此订单安排给其他加盟商'
                        time = new Date(this.detail[0].not_endtime).getTime() - new Date().getTime()
                        return
                    }
                    if(item.shipping_status == 6) {
                        status = 2
                        title = '已发货'
                        desc = '后买家自动确认收货'
                        time = new Date(this.detail[0].confirm_endtime).getTime() - new Date().getTime() 
                        return
                    }
                }
            })
            return { status, title, desc, time }
        }
    },
    mounted(){
        this._get()
    },
    methods:{
        //发货
        submit() {
            if(!this.com) {
                this.$toast('请选择快递公司')
                return
            }
            if(!this.num) {
                this.$toast('请输入快递单号')
                return
            }
            this._submit()
        }, 
        async _submit(){
            let form = {
                order_code: this.$route.params.id,
                com: this.com,
                num: this.num,
                openid: this.openid
            }
            this.btnloading = true
            let { data: { code } } = await this.$http.post(this.$api.merchantIncrease,form)
            this.btnloading = false
            if(code == 0) {
                this._get()
            }
        },  
        //获取订单内容
        async _get() {
            let { data: { code, data } } = await this.$http.get(this.$api.merchantDetails,{
                order_code: this.$route.params.id,
                openid: this.openid
            })
            this.loading=false
            if(code === 0) {
                this.detail = data
                if(this.detail[0].shipping_status != '2') {
                    this.getLogistics(this.detail[0].com, this.detail[0].num)
                }
            }
        },
        async getLogistics(com, num) {
            let { data: { code, data } } = await this.$http.get(this.$api.platformExpre,{
                com,
                num
            })
            if(code === 0) {
                if (Array.isArray(data)) {
                    let logisArr = data[0].data.map(item => {
                        item.day = item.time.substring(5, 10)
                        item.time = item.time.substring(11, 16)
                        return item
                    })
                    this.logis = {
                        com: data[0].com,
                        num: data[0].nu,
                        logisArr
                    }
                } else {
                    this.logis = data
                }
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    .orderdetail{
        padding-bottom: 50px;
        .van-skeleton__title{
            margin-top: 2rem;
        }
        .van-skeleton__row, .van-skeleton__title{
            background-color: #fff;
        }
        .top{
            text-align: center;
            margin-bottom: .2rem;
            padding: 2rem 0;
            background: orange;
            color: #fff;
        }
        .bottom{
            padding: 1rem 0;
        }
        .bar{
            padding-bottom: 2rem;
        }
        .item{
           border-top: 1px solid #f0f0f0;
           background-color: #fff;
           .form{
                display: flex;
                padding: 1rem;
                background: #fff;
                font-size: 14px;
                span{
                    display: block;
                    flex: 0 0 10rem;
                    width: 2rem;
                    margin-right: .4rem;
                }
                select{
                    padding: 0;
                    background: #fff;
                    border: 0;
                }
                input,select{
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    display: block;
                    font-size: 14px;
                }
           }
        }
        .btn{
            margin: 2rem 0;
        }
    }
</style>